<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>/*  1  +  100  取值：选择器被选中几率增加*/
			di v#d1{
			width: 50%;
			height: 500px;
			/*颜色色值  透明度  遮罩层 左栏*/
		    background: rgba(11, 114, 134, .3);
			}
			/*最大宽度与最小宽度*/
			div#container{
				background: #f0f0f0;
			}
			div.box{
				background: #ff0e42;
				color:#fff;
				width: 80%;
				/*最小宽度：设定  不能改变  移动端*/
				min-width: 500px;
				/*最大宽度 设定,宽度最大上限600px*/
				max-width: 600px;
				/*页面设定最大与最小宽高，约定 移动端宽高比，页面错乱*/
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
	<!-- 最大宽度与最小宽度  
	自适应  编写页面在任何浏览器下正常显示 -->
	<div id="container">
	   <div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio, tempora blanditiis! Nemo, iste, veniam sapiente maxime eius repellendus accusantium deserunt aliquid placeat distinctio voluptatibus eum sequi esse tempore asperiores odio!</div>
	</div>
	</body>
</html>